// 商品列表数据的变量名
var arr = [];

// 购物车存储数据的变量名
var cartarr = [];

window.onload = function(){
    // getLocalGoodsListData();   


    // 将商品列表渲染到页面里
    showGoodsList(getLocalGoodsListData());

    // 将购物车渲染到页面里
    render(getLocalCartData());
}

    // 获取商品列表
function getLocalGoodsListData(){
        arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
        // console.log(arr);
        return arr;
}

// 传入商品列表顺序，    getdata.js
// 渲染到页面上
    function showGoodsList(arr){
    // 获取ul元素节点
    var list_ul = document.querySelector(".list_ul");
    list_ul.innerHTML = "";
    // 通过for循环将每个li都显示出来
    for(var i=0; i<arr.length;i++){
        list_ul.innerHTML +=
        `
            <li data_id = "${arr[i].goodsid}">
                <img src="${ arr[i].image }" >
                <div class="good_title mt5">
                    ${ arr[i].name }
                </div>
                <div class="price mt5">
                    ${ arr[i].price }元
                </div>
                <button type="button" class="btn_add mt5" onclick='addCart("${ arr[i].goodsid }","${ arr[i].image }","${ arr[i].name }","${ arr[i].price }")'>
                    加入购物车
                </button>
            </li>
        `
    }
}

function addCart(goodsId, img, goodsName, price) {
	//默认点击添加购物车，默认是加1
	var count = 1;

	//商品的小计，价格*数量
	var xiaoji = price / 1 * count;

	//所有需要的信息 存放到对象里
	var obj = {
		id: goodsId,
		src: img,
		title: goodsName,
		price: price,
		count: count,
		xiaoji: xiaoji.toFixed(2),
		time: new Date().toLocaleTimeString()
	}

	addData(obj);

}

// 添加数据到购物车并渲染
function addData(obj) {
	cartArr = getLocalCartData();
	var result = cartArr.some(function(item,index){
		return item.id === obj.id
	})
	if(result){
		jia(obj.id);
		return;
	}
	cartArr.push(obj);
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);

}

// 渲染cartArr到购物车列表
function render(cartArr) {
	var tbody = document.querySelector('tbody');
	tbody.innerHTML = "";
	var str = "";
	var sum = 0;
	for (var i = 0; i < cartArr.length; i++) {
		str += `
			
				<tr>
						<td>
							<input type="checkbox" name="" id="" value=""  class="danxuan" data-id="${ cartArr[i].id }"/>
						</td>
						<td>
							<p>
								<img src="${ cartArr[i].src }" >
								<br>
								<span>${ cartArr[i].title }</span>
							</p>
						</td>
						<td>
						    <button type="button" class="btn" onclick="jian(${ cartArr[i].id })">-</button>
							<input disabled type="number" name="" id="" value="${ cartArr[i].count }" class="count"/>
							<button type="button" class="btn" onclick="jia(${ cartArr[i].id })">+</button>
						</td>
						<td>
							<span>${ cartArr[i].price }元</span>
						</td>
						<td>
							${ cartArr[i].xiaoji }
						</td>
						<td>
							<button type="button" onclick="del(${ cartArr[i].id })">删除</button>
						</td>
						<td>
							${ cartArr[i].time }
						</td>
				</tr>
		
		        `
		sum = sum / 1 + cartArr[i].xiaoji / 1
	}

	tbody.innerHTML = str;
	document.getElementById("sum").innerHTML = sum;
}

// 获取本地购物车数据
function getLocalGoodsListData() {
	arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
	return arr;
}


// 点击"-"
function jian(id) {
	console.log("id:", id);
	//本地获取数据赋值给到cartArr
	cartArr = getLocalCartData();
	cartArr.forEach(function (item, index) {
		if (item.id == id) {
			if (item.count > 1) {
				item.count--;
				item.xiaoji = (item.count * item.price).toFixed(2);
			}
		}
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}

// 点击"+"
function jia(id) {
	console.log(id);
	cartArr = getLocalCartData();
	cartArr.forEach(function (item, index) {
		if (item.id == id) {
			item.count++;
			item.xiaoji = (item.count * item.price).toFixed(2);
		}
	});
	//本地数据的更新
	localStorage.cartArr = JSON.stringify(cartArr);
	//本地数据发生变化后，页面也要重新渲染
	render(cartArr);
}


// 点击删除按钮，根据点击的商品的id,删除商品
function del(id) {

	cartArr = getLocalCartData();

	cartArr = cartArr.filter(function (item, index) {
		return item.id != id
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}

// 全选
var quanxuan = document.querySelector(".quanxuan");
quanxuan.onclick = function () {
	var danxuanList = document.querySelectorAll(".danxuan");
	for (let index = 0; index < danxuanList.length; index++) {
		danxuanList[index].checked = quanxuan.checked;
	}
}


var delChecked = document.getElementById("delChecked");
delChecked.onclick = function(){

	cartArr = getLocalCartData();
	var danxuanList = document.querySelectorAll(".danxuan:checked");
	for (let i = 0; i < danxuanList.length; i++) {
		
		cartArr.forEach(function(item,index){
			if(item.id === danxuanList[i].getAttribute("data-id")){
				cartArr.splice(index,1)
			}
		})
		
	}

	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}
